@use "sass:map";

@use "./vars" as *;

@mixin with-bg {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: border-color var(--el-transition-duration),
    background-color var(--el-transition-duration-fast);
}

@mixin with-border {
  border-bottom: 1px solid var(--border-color);
}

$breakpoints: (
  "sm": #{$breakpoint-sm},
  "md": #{$breakpoint-md},
  "lg": #{$breakpoint-lg},
  "xlg": #{$breakpoint-xlg},
  "xxl": #{$breakpoint-xxl},
  "max": #{$breakpoint-max},
) !default;

@mixin respond-to($breakpoint) {
  @if #{map.has-key($breakpoints, $breakpoints)} {
    @media screen and (min-width: #{map.get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
}
